import React from 'react'
import ReactDOM from 'react-dom'
import { Router, Route, Link } from 'react-router'
import cx from 'classnames'
import mousetrap from 'mousetrap'
import styles from './nav.css'
import request from '../request'

class Nav extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            authed: false,
            trans_result: ""
        }
    }
    openTrans() {
        $('#'+styles.trans_box).modal('show')
    }
    componentDidMount() {
        mousetrap.bind('/', ()=> {
            this.openTrans()
        })
        $('#'+styles.trans_box).on('keyup', 'textarea', (el)=> {
            $(el.target).height(0).height(el.target.scrollHeight)
            request("translate", "POST", {input: $(el.target).val() }).done(res => {
                this.setState({trans_result: res.result})
            })
        })
    }
    render() {
        return (
            <nav id={styles.root}>

                {/* Normal */}
                {(this.state.authed?
                    <div className="ui container menu secondary" data-role='menu'>
                        <a className="item" id={styles.logo} href="/">swallow</a>
                        <a className="item">Translate</a>
                        <a className="item">Library</a>
                        <a className="item">My Words</a>
                        <a className="item">Notifiaction</a>

                        <div className="ui pointing dropdown link item">
                            <span className="text">UserName</span>
                            <i className="dropdown icon"></i>
                            <div className="menu" data-role='menu'>
                                <div className="header">Profile</div>
                                <div className="item">Setting</div>
                                <div className="item">Expense</div>
                                <div className="divider"></div>
                                <div className="header">Log Out</div>
                            </div>
                        </div>
                    </div>
                    :
                    <div className="ui container menu secondary fn-rel" data-role='menu'>
                        <a className="item" id={styles.logo} href="/">swallow</a>

                        <div className={cx(styles.trans_input, "ui left icon input")}>
                            <input className="target" type="text" onClick={::this.openTrans} placeholder="'/' target and translate ... " />
                            <i className="translate icon"></i>
                        </div>

                        <div className="right menu" data-role='menu'>
                            <button className="ui button inverted orange">Library</button>
                            <span className={styles.divid}></span>
                            <Link className="ui button green" to={`/login`}>Login</Link>
                            <button className="ui button inverted green">Register</button>
                        </div>
                    </div>
                )}

                <div id={styles.trans_box} className="ui modal">
                    <div className="actions">
                        <div className="ui positive right labeled icon button">Close<i className="remove icon"></i></div>
                    </div>
                    <div className="content fn-clear">
                        <div className="ui form trans_left">
                            <textarea rows="7" placeholder="translate something" className="origin"></textarea>
                        </div>
                        <div className="trans_right">
                            {this.state.trans_result}
                        </div>
                    </div>
                </div>

                {/* Sidebar Menu */}
                {(this.state.authed?
                    <div className="ui vertical inverted sidebar menu left" data-role='menu'>
                        <a className="active item">Home</a>
                        <a className="item">Translate</a>
                        <a className="item">Library</a>
                        <a className="item">My Words</a>
                        <a className="item">Notifiaction</a>

                        <a className="item">Profile</a>
                        <a className="item">Setting</a>
                        <a className="item">Expense</a>
                        <a className="item">Log Out</a>
                    </div>
                    :
                    <div className="ui vertical inverted sidebar menu left" data-role='menu'>
                        <a className="active item">Home</a>
                        <a className="item">Translate</a>
                        <a className="item">Library</a>

                        <a className="item">Login</a>
                        <a className="item">Signup</a>
                    </div>
                )}
            </nav>
        );
    }
}

export default Nav
